<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
    }

    ul {
        width: 1000px;
        height: 60px;
        border-bottom: 3px solid skyblue;
        margin: 50px auto;
        /* 这里的弹性布局时为了让 li 横向排列 */
        display: flex;
        position: relative;
    }

    li {
        /* 每一个 li 占父元素的一份 */
        flex: 1;
        height: 100%;
        /* 再 li 里面写 弹性布局是为了让文字绝对居中 */
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    span {
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100px;
        height: 3px;
        background-color: red;
    }
</style>

<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
        <li>选项7</li>
        <li>选项8</li>
        <li>选项9</li>
        <li>选项10</li>
        <span></span>
    </ul>

</body>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
    //每一个li添加移入事件
    $('ul > li').mouseover(function () {


        //this是移入的li
        // 移入li的索引值 $(this).index()

        // 让 span 滑块 的 left 值跟着改变
        //   运动就使用 animate() 函数
        // $('span').animate({
        //   left: $(this).index() * 100    第n个选项卡*选项卡宽度
        // })

        // 每次移入的时候, 都让之前的动画停止, 直接做最新的这个动画
        // $('span').stop().animate({
        //     left: $(this).index() * 100
        // })
        $('span').animate({
            left: $(this).index() * 100
        })
    })
</script>

</html>